<template>
  <div class="container-video">
    <div class="video-wrap" v-for="n in 1" :key="n">
      <!-- 核心组件 -->
      <barrageVideoplayer
          ref="player"
          :src="videoSrc"
          :cover="cover"
          primaryColor="#FB7299"
          width="100%"
          height="100%"
      ></barrageVideoplayer>
    </div>
    <div class="video-src">
      视频地址：<input
        :value="videoSrc"
        @input="onChangeInputSrc"
        type="text"
    />
      <button @click="videoSrc = inputSrc" class="upload-btn">确定</button>
    </div>
    <button class="upload-btn chooseLocal">
      <input type="file" @change="onInputFileChange"/>
      <span>选择本地视频</span>
    </button>
  </div>
</template>

<script>
import barrageVideoplayer from "../../components/barrage-videoplayer.vue";

export default {
  components: {
    barrageVideoplayer,
  },
  props: {
    vod_id: String
  },
  mounted() {
    this.getVideoDetail()
  },
  data() {
    return {
      videoSrc: "https://yleen.cc/files/videos/摇曳露营01.mp4", // 视频链接
      cover: "https://yleen.cc/files/images/摇曳露营cover1.jpg", // 可选，封面图的链接
      inputSrc: null,
    };
  },
  created() {
    this.inputSrc = this.videoSrc;
  },
  methods: {
    getVideoDetail() {
      const vod_id = this.vod_id
      this.$store.dispatch('getVideoDetail', {vod_id}).then((res) => {
        // 获取Video信息
        this.videoSrc = res.video.src;
        this.cover = res.video.pic;
      })
    },
    /**
     * 选择本地视频文件
     */
    onInputFileChange(e) {
      this.cover = null; // 去掉封面
      this.videoSrc = URL.createObjectURL(e.currentTarget.files[0]);
    },
    /**
     * 手动输入视频链接
     */
    onChangeInputSrc(e) {
      this.inputSrc = e.target.value;
    },
  },
};
</script>

<style scoped>
.container-video {
  margin: auto;
  max-width: 1000px;
}

.video-wrap {
  display: inline-flex;
  /*width: 60%;*/
  max-height: 600px;
  background: #000;
  box-shadow: #aaa 0 0 4px;
  margin: 30px auto;
}

.video-src {
  /*margin: 0.4rem 0;*/
  margin-left: 5%;
}

.video-src input {
  display: inline-block;
  width: 430px;
  max-width: 100%;
}

.upload-btn {
  display: inline-block;
  position: relative;
  padding: 4px 10px;
  margin-left: 20px;
  background: #fafafa;
  color: #0082ba;
  border: 1px solid #5c9bb6;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-btn:hover {
  background: #5c9bb6;
  color: #fafafa;
}

.upload-btn > input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.upload-btn input::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.chooseLocal{
  margin-left: 40%;
}
@media (max-width: 567px) {
  .video-wrap {
    font-size: 12px;
  }
}
</style>
